<template>
  <div class="page-c play">
    <div class="text">
      <h3>{{name}}</h3>
      <h4>{{singer}}</h4>
    </div>
    <div class="pic" v-if="iamif">
      <img :src="cover" :alt="cover" v-if="lvyif" @click="lvyif=!lvyif" />
      <p v-else @click="lvyif=!lvyif" ref="lyric">{{lyric}}</p>
    </div>
    <div class="picdiv" v-else>
      <p>1</p>
    </div>
    <div v-for="(item,index) in songurl" :key="index" class="music">
      <audio autoplay controls ref="audio">
        <source :src="item.url" type="audio/MP3" />
      </audio>
    </div>

  </div>
</template>

<script>
export default {
  //import引入的组件需要注入到对象中才能使用
  name: "Play",
  components: {},
  data() {
    //这里存放数据
    return {
      id: "",
      songurl: [],
      cover: "",
      name: "",
      singer: "",
      iamif: true,
      lvyif: true,
      lyric: []
    };
  },  
  methods: {
    
    imgtoly() {
       let top=-20
      setInterval(() => {
        top+=-20
       this.$refs.lyric.style.top=top+"px"
      }, 6000);
    }
  },
<<<<<<< HEAD
=======
  methods: {
  },
>>>>>>> c0574fc0f3059902787a9b533fe7dec5f952ec3d
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    setTimeout(this.imgtoly,6000)

    this.id = this.$route.params.id;
    this.$axios
      .all([
        this.$axios({
          url: this.$URL.BASE_URL + "/song/url",
          params: {
            id: this.id
          }
        }),
        this.$axios({
          url: this.$URL.BASE_URL + "/song/detail",
          params: {
            ids: this.id
          }
        })
      ])
      .then(
        this.$axios.spread((res1, res2) => {
<<<<<<< HEAD
          console.log(res2.data.songs);
          // console.log(res3.data.lrc.lyric);

=======
>>>>>>> c0574fc0f3059902787a9b533fe7dec5f952ec3d
          this.songurl = res1.data.data;
          res2.data.songs[0].al.picUrl == null
            ? (this.iamif = false)
            : (this.iamif = true);
          this.cover = res2.data.songs[0].al.picUrl;
          this.name = res2.data.songs[0].al.name;
          this.singer = res2.data.songs[0].ar[0].name;
        })
      );

    this.$axios({
      url: this.$URL.BASE_URL + "/lyric",
      params: {
        id: this.id
      }
    }).then(res => {
      res.data.lrc == undefined
        ? console.log(1)
        : console.log(res.data.lrc.lyric);

      this.lyric = res.data.lrc.lyric.replace(/\[(.+?)\]/g, "");

      console.log(this.lyric);
    });
  }
};
</script>
<style lang='scss' scoped>
.pic {
  margin: 50px auto;
  position: relative;
  overflow: hidden;
  width: 260px;
  height: 260px;
  img {
    width: 100%;
    border-radius: 50%;
    animation: rotate 60s linear infinite;
  }
  p {
    padding-top: 20px;
    box-shadow: inset 0 0 10px black;
    letter-spacing: 2px;
    line-height: 27px;
    white-space: pre-line;
    text-align: center;
    position: absolute;
    transition: 2s;
  }
}
<<<<<<< HEAD
.picdiv {
  color: red;
  width: 260px;
  margin: 50px auto;
  height: 260px;
  background-color: antiquewhite;
=======
@mixin animation($val) {
  animation: $val;
  -webkit-animation: $val;
  -moz-animation: $val;
  -ms-animation: $val;
>>>>>>> c0574fc0f3059902787a9b533fe7dec5f952ec3d
}
@keyframes rotate {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}

.text {
  margin-top: 20px;
  text-align: center;

  h3 {
    font-size: 18px;
    font-weight: normal;
  }
  h4 {
    font-weight: lighter;
    font-size: 13px;
  }
}
.music {
  text-align: center;
}

//@import url(); 引入公共css类
</style>